<template>
    <div style="">
        <my-simple-table>

            <my-simple-tr label="基础功能">
                <el-time-select
                        v-model="value"
                        :picker-options="pickerOptions"
                        placeholder="选择时间">
                </el-time-select>
            </my-simple-tr>

            <my-simple-tr label="区间范围">
                <el-time-select
                        clearable
                        size="medium"
                        v-model="startTime"
                        :picker-options="pickerOptions"
                        placeholder="开始时间">
                </el-time-select> -
                <el-time-select
                        disabled
                        v-model="endTime"
                        :picker-options="pickerOptions"
                        placeholder="结束时间">
                </el-time-select>
            </my-simple-tr>

            <my-simple-tr label="任意时间范围">
                <el-time-picker
                        is-range
                        v-model="value1"
                        align="right"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围">
                </el-time-picker>
                <el-time-picker
                        is-range
                        arrow-control
                        v-model="value2"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围">
                </el-time-picker>
            </my-simple-tr>


        </my-simple-table>
    </div>
</template>

<style>

</style>

<script>

    export default {
        name: "my-el-input-number",
        data() {
            return {
                value: '',
                startTime: '',
                endTime: '',
                value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
                value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
                pickerOptions: {
                    start: '08:30',
                    step: '00:15',
                    end: '18:30'
                }
            };
        },
        methods: {}
    }
</script>

